<template>
    <div class="x2">
        <el-container style="height: 100%; margin: 0;padding: 0;">
            <el-header class="tou1">
                <div style="display: flex;">
                    <i :class="this.$router.options.routes[3].children[1].meta.icon" style="align-self: center;"></i>
                    <p>{{ this.$router.options.routes[3].children[1].meta.name }}</p>
                </div>
            </el-header>
            <el-main class="shen1">
                <div style="display: flex;">
                    <div>
                        <template>
                            <el-button type="button" style="width: 100px ;height: 35px; " @click="add">点击打开
                            </el-button>
                        </template>
                    </div>
                    <div style="display: flex; justify-content: flex-end;margin-left:20px">
                        <el-input v-model="params.name" placeholder="请输入内容"></el-input>
                        <el-button type="primary" icon="el-icon-search" @click="sous">搜索</el-button>
                    </div>
                </div>
                <el-table :data="biaoshuju" style="width: 100% ,">
                    <el-table-column prop="id" label="ID" width="180">
                    </el-table-column>
                    <el-table-column prop="name" label="系名" width="180">
                    </el-table-column>



                    <el-table-column prop="teacherCount" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="shan(scope.row.id)">删除</el-button>
                            <el-button type="text" size="small" @click='edit(scope.row.id)'>编辑</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-main>
            <el-footer class="jiao1">
                <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination :current-page.sync="page" @current-change="currentChange" layout="prev, pager, next"
                        :total="yeshu">
                    </el-pagination>
                </div>
            </el-footer>
        </el-container>
        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="100px" ref="form">
                <el-form-item label="系名" prop="name" :rules="[{ required: true, message: '请输入系名', trigger: 'blur' }]">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="xileijia1">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>
<script>
import { xilei, xilei1, xileijia, xileixq, xileixg, xileishan } from '@/api/index'
export default {
    data() {
        return {
            input: '',
            params: {
                name: "",
                id:''
            },
            biaoshuju: [],
            yeshu: 1,
            page: 1,
            form: {
                id: -1,
                name: '',
            },
        
            dialogFormVisible: false,

        }
    },
    methods: {

        edit(id) {
            console.log(id);
            xileixq(id).then(res => {
                console.log(res);
                if (res.code === 0) {
                    this.form = res.data;
                    this.dialogFormVisible = true
                }

            })
        },
        add() {
            this.dialogFormVisible = true
        },
        xileijia1() {
            this.$refs['form'].validate(f => {
                console.log(f);
                if (this.form.id === -1) {
                    xileijia(this.form).then(res => {
                        console.log(res);
                        if (res.code === 0) {
                            this.$message({
                                message: "添加成功",
                                type: "success"
                            })
                            this.xishuju()
                            this.dialogFormVisible = false
                        }
                    })
                } else {
                    xileixg(this.form).then(res => {
                        console.log(res);
                        if (res.code === 0) {
                            this.$message({
                                message: "添加成功",
                                type: "success"
                            })
                            this.xishuju()
                            this.dialogFormVisible = false
                        }
                    })
                }


            })
        },
        xishuju() {
            xilei(this.params, this.page).then(res => {

                if (res.code === 0) {
                    console.log(res.data);


                    this.biaoshuju = res.data
                }
            })
        },
        currentChange(v) {
            console.log(v);
            console.log(1);
            this.page = v
            this.xishuju()


        },

        xishuju1() {
            xilei1(this.params).then(res => {
                console.log(res, 'ye');

                if (res.code === 0) {
                    this.yeshu = res.data * 10
                    console.log(res.data * 10);

                }
            })
        },
        sous() {
            this.page = 1,
                this.xishuju1(),
                this.xishuju()
        },

        shan(id) {

            xileishan(id).then(res => {

                if (res.code === 0) {

                    // 假设返回 code 为 0 表示删除成功

                    this.$message({

                        message: "删除成功",

                        type: "success"

                    });

                    // 刷新数据列表

                    this.xishuju();

                } else {

                    // 处理删除失败的情况

                    console.error("删除失败", res);

                }

            }).catch(error => {

                console.error("请求失败", error);

            });

        }


    },
    mounted() {
        this.xishuju(),
            this.sous(),
            this.xishuju1(),
            this.currentChange()




    }
}
</script>
<style lang="scss">
html,
body,


.el-header,
.el-main,
.el-footer {
    width: 100%;
    margin: 0;

    padding: 0; // 如果你想完全移除内边距，可以这样设置

    // 如果只是想要调整内边距，可以指定具体的值，例如：

    // padding: 10px;

}

.block {
    justify-items: center;
}
</style>